<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style type="text/css">
    body{
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        /*align-content: center;*/
    }
    div{
        flex: 0 0 100px;
        height: 100px;
        width: 100px;
        background-color: yellow;
        border: 5px red solid;
        margin: 10px;
        font-size: 5vw;
        font-size: 5vh;
        text-align: center;
        line-height: 50px;
    }
</style>
<body>
    <div id="d1">S</div>
    <div id="d2">B</div>
    <div id="d3">S</div>
    <div id="d4">B</div>
</body>
</html>